<template>
  <!-- 顶部歌单信息 -->
  <div id="top-info">
    <a-skeleton
      active
      :loading="loading"
      :paragraph="{ rows: 4 }"
      :avatar="{ size: 'large', shape: 'square' }"
    >
      <div class="left-img">
        <slot name="picture"></slot>
      </div>
      <div class="right-describe mleft-10" :style="rightStyle">
        <!-- 标题 -->
        <div class="describe-title">
          <div class="tag">{{ tagName }}</div>
          <span v-if="isList" class="font-20 mleft-10 font-weight">
            {{ playList.name }}
          </span>
        </div>
        <!-- 歌单创建人 -->
        <div class="describe-user font-12" v-if="isplay">
          <div class="img-height pointer" @click="() => $emit('goUserDetail', playList.userId)">
            <img class="img-height br-50" v-if="isList" v-lazy="`${playList.creator.avatarUrl}?param=300y300`">
            <span v-if="isList" class="mleft-10 pointer" style="color: rgb(11, 88, 176);">
              {{ playList.creator.nickname }}
            </span>
          </div>
          <span v-if="isList" class="mleft-10">
            {{ createdTime }}
          </span>
        </div>
        <!-- 操作按钮 -->
        <div class="describle-btns">
          <slot name="btns"></slot>
        </div>
        <slot></slot>
        <!-- 歌单简介 -->
        <div v-if="isList && isplay" class="describle-gedaninfo font-16">
          <p
            style="margin-bottom: 0;"
            v-html="`简介：${playList.description ? playList.description.replace(/\n/g, '<br>') : ''}`"
          ></p>
        </div>
        <!-- 加载更多 -->
        <a-icon v-if="isplay" @click="showMore" class="check-more font-16" type="caret-down" />
      </div>
    </a-skeleton>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import { Skeleton } from 'ant-design-vue';
import { changeTimeStamp, changeBigCount } from '@/utils/figure';

export default {
  name: 'TopInfo',

  components: {
    ASkeleton: Skeleton
  },

  props: {
    playList: {
      type: Object,
      default() {
        return {}
      }
    },
    rightStyle: {
      type: Object,
      default() {
        return {}
      }
    },
    tagName: {
      type: String,
      require: true
    }
  },

  data() {
    return {
      clickTotal: 0,
    };
  },

  computed: {
    ...mapState({
      // playList: state => state.main.playList,
      loading: state => state.main.loading
    }),
    isList() {
      return this.playList && this.playList.id;
    },
    isplay() {
      return this.tagName === '歌单';
    },
    createdTime() {
      return changeTimeStamp(this.playList.createTime);
    }
  },

  mounted() {
    // 进入页面时显示骨架屏
    // this.$store.commit('main/LOADING', true);
  },

  methods: {
    showMore() {
      this.clickTotal++;
      const check = document.querySelector('.check-more'),
        info = document.querySelector('.describle-gedaninfo');
      // 说明是双击, 后续优化：不要多次修改style,应该定义class通过.add添加class
      if (this.clickTotal % 2 === 0) {
        check.style.transform = 'rotate(0deg)';
        info.style.overflow = 'hidden';
        info.style.maxHeight = '22px';
      } else {
        check.style.transform = 'rotate(180deg)';
        info.style.overflow = 'visible';
        info.style.maxHeight = '666px';
      }
      check.style.transition = 'all .5s ease-in-out';
      info.style.transition = 'all 1s ease-in-out';
    },
    // 获取yyyy-mm-dd格式
    change(data) {
      return changeTimeStamp(data);
    },
    // 播放量转换
    change2(value) {
      return changeBigCount(value);
    },
  }
};
</script>

<style lang="less" scoped>
#top-info {
  /deep/span.ant-skeleton-avatar-square {
    width: 160px;
    height: 160px;
  }
  /deep/h3.ant-skeleton-title {
    margin-top: 0;
  }
  >span {
    display: flex;
  }
  .left-img {
    width: 180px;
    height: 180px;
    border-radius: 10px;
    overflow: hidden;
  }
  .right-describe {
    flex: 1;
    line-height: 24px;
    .describe-title {
      display: flex;
      align-items: center;
      .tag {
        display: inline-block;
        border: 1px solid #ec4141;
        padding: 0 2px;
        font-size: 14px;
        height: 22px;
        line-height: 22px;
        color: #ec4141;
        border-radius: 2px;
      }
    }
    .describe-user {
      display: flex;
      align-items: center;
      height: 24px;
      margin: 5px 0;
    }
    .describle-btns {
      margin: 5px 0;
    }
    .describle-gedaninfo {
      max-height: 22px;
      overflow: hidden;
    }
  }
}
</style>